<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>log in</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">用户ID</label>
        <div class="layui-input-block">
            <input id="user_id" type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input id="user_password" type="password" name="password" required lay-verify="required"
                   placeholder="请输入密码"
                   autocomplete="off" class="layui-input">
        </div>
        <div id="auxiliary_text" class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">

            <button id="login_button" class="layui-btn" lay-submit lay-filter="formDemo">立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</div>
<script src="./layui/JQuery.js"></script>
<script src="./layui/layui.js"></script>
<script>
    //设置跳转函数
    $(function (){
        console.log("window loaded!")
        //检测提交按钮是否被点击
        $("#login_button").on('click', function login() {
            console.log("login clicked!")
            //格式
            $.ajax({
                type: 'post',
                url: "http://localhost:8888/login",
                data: {
                    id: $("#user_id").val(),
                    password: $("#user_password").val()
                },
                text: "json",
                //括号里面必须是data
                success: function (data) {
                    console.log(data)
                    if (data.code == 0) {
                        // 跳转至用户主页
                        window.location.href = '/index.html'
                    } else {
                        //控制台输出
                       alert( '用户名或密码错误！')
                    }
                }
            })
        })
    })
</script>
</body>
</html>